<template>
  <div>
    <!-- max-width:750px; 此宽度用于整体页面固定时-->
    <scroller v-show="!isWeChar" :lock-x="true" :lock-y="true" style="width:100%;height:46px;z-index:2;">
      <div class="order__head">
        <x-header>
          <div slot="default" class="common__header--title">选择赔案</div>
          <div @click="goBack" slot="overwrite-left" class="common__header--img">
            <img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back">
          </div>
        </x-header>
      </div>
    </scroller>
    <div class="history__row" v-for="(item,index) in reportsList" :key="index" @click="showContent(index)">
      <!-- 右数据区 -->
      <div class="history__row_l">
        <p>
          <label>报案号：</label>
          <span>{{item.reportNo}}</span>
          <span class="l_status">{{item.status | filter_status}}</span>
        </p>
        <p>
          <label>保单号：</label>
          <span>{{item.policyNo}}</span>
        </p>
        <p>
          <label>报案时间：</label>
          <span>{{item.reportDate}}</span>
        </p>
      </div>
      <!-- 右箭头 -->
      <div :id="'ico_right'+index" class="history__row_r">
        <img src="~assets/x3/ico/more-right.png" width="15">
      </div>
      <!-- 详情 -->
      <div class="history__row_slide" :id="'content'+index">
        <p v-show="isCarPo(item.policyNo)">
          <label>车牌号：</label>
          <span>{{item.carNo}}</span>
        </p>
        <!-- <p>
          <label>邮箱地址：</label>
          <span>{{item.email}}</span>
        </p>
        <p>
          <label>riskName：</label>
          <span>{{item.riskName}}</span>
        </p> -->
      </div>
    </div>

  </div>
</template>
<script>
import { XHeader, Scroller, Group, Cell, XInput } from "vux";
import { mapState, mapActions } from "vuex";
import { Mutations, RouteUrl, BaseService } from "src/common/const";
import DateUtil from 'src/common/util/dateUtil';
export default {
  components: { XHeader, Scroller, Group, Cell, XInput },
  computed: mapState(["user", "isWeChar", "order"]),
  data() {
    return {
      reportsList: [],
      isShow: false
    };
  },
  filters: {
    filter_status(value) {
      //理赔状态
      switch (value) {
        case "0": return "关闭";
        case "1": return "新建";
        case "2": return "打开";
        case "3": return "重开";
        default: return "其他";
      }
    },
    filter_time(value) {
      return DateUtil.getDateStr_YmdByTs(value);
    },
    filter_time_full(value) {
      return DateUtil.getDateStr_YmdhmsByTs(value);
    }
  },
  methods: {
    isCarPo(proposalNo) {
      let type = proposalNo.substring(2, 4);
      if (type == "05") {
        return true;
      } else {
        return false;
      }
    },
    showContent(index) {
      if (this.order.menu.baseService == BaseService.CLAIM_UPLOAD && this.reportsList[index].status != "0") {
        let data = this.reportsList[index];
        let querySetData = {
          email: data.email,
          autoPolNo: data.reportNo
        }
        this.$common.storeCommit(this, Mutations.CLIAIMS_DATA, querySetData);
        this.$common.goUrl(this, RouteUrl.REPORT_UPLOAD_FILES);
      } else {
        if ($("#content" + index).hasClass("animate")) {
          $("#content" + index).removeClass("animate");
          $("#ico_right" + index + " img").attr("src", require("src/assets/x3/ico/more-right.png"));
        } else {
          $("#content" + index).addClass("animate");
          $("#ico_right" + index + " img").attr("src", require("src/assets/x3/ico/more-down.png"));
        }
      }
      // this.isShow = !this.isShow;
    },
    goBack() {
      this.$common.goBack(this);
    },
    beforeRouteEnter(to, from, next) {
      next();
    }
  },
  beforeRouteEnter(to, from, next) {
    sessionStorage["POLICYLIST_FORM_URL"] = from.path;
    next();
  },
  beforeMount() {
    if (sessionStorage["POLICYLIST_FORM_URL"] == "/") {
      this.$common.goUrl(this, RouteUrl.SERVICE);
    }
  },
  mounted() {
    document.title = "选择赔案";
    this.$init.subPageInit(this);
    if (!this.$common.isEmpty(this.order) && !this.$common.isEmpty(this.order.reportsList) && this.order.reportsList.length > 0) {
      this.reportsList = this.order.reportsList;
    }
  }
}
</script>

<style lang="scss">
.history__row {
  padding: 5px 10px;
  background-color: #fff;
  margin: 10px auto;
  line-height: 30px;
}

.history__row_l {
  float: left;
  width: 80%;
  font-size: 14px;
  color: #353535;
  .l_status {
    border: 1px solid #dedede;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
    color: #C8161D;
  } // p {
  //   span {
  //     max-height: max-content;
  //   }
  // }
}

.history__row_r {
  float: right;
  width: 10%;
}

//详情
.history__row_slide {
  clear: both;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
  font-size: 14px;
  p {
    display: block;
    float: left;
    width: 100%;
    line-height: 26px;
    color: #777;
    label {
      display: block;
      float: left;
    }
    span {
      display: block;
      max-height: max-content;
    }
  }
}

//显示
.animate {
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
}
</style>
